function Banner() {
    this.index = 1;
    this.bannerUl = $("#banner-ul");
    this.leftArrow = $(".left-arrow");
    this.rightArrow = $(".right-arrow");
    this.liList = this.bannerUl.children("li");
    this.bannerCount = this.liList.length;
    this.bannerWidth = 800;
    this.pageControl = $(".page-control");
}

// 添加自定义Li标签函数
Banner.prototype.initPageControl = function () {
    var self = this;
    // 动态添加li标签
    for(var i=0;i<self.bannerCount;i++){
        // 此条代码是添加li标签，不能写成$("li")
        var circle = $('<li></li>');
        self.pageControl.append(circle);
        if (i===0){
            // 给激活的li标签添加class="actice"
            circle.addClass("active");
        }

    }
    // 动态修改pagecontrol标签的宽度
    self.pageControl.css({"width":self.bannerCount*10+10*2+20*(self.bannerCount-1)});
};

// 动态控制Banner
Banner.prototype.initBanner =function () {
    var self = this;
    var firstLi = self .liList.eq(0).clone();
    var lastLi = self.liList.eq(self.bannerCount-1).clone();
    self.bannerUl.append(firstLi);
    self.bannerUl.prepend(lastLi);
    // 由于添加了两个li标签，所以宽度必须加2，然后，轮播时第一张图必须默认改成左移一张的图：3  1 2 3 1
    self.bannerUl.css({"width":self.bannerWidth*(self.bannerCount+2),"left":-self.bannerWidth});

};


// 添加轮播函数
Banner.prototype.animate = function () {
    var self = this;
    self.bannerUl.stop().animate({"left":-self.bannerWidth*self.index},1000);
    var index = self.index;
    if(index===0){
        index = self.bannerCount-1;
    }else if(index===self.bannerCount+1){
        index = 0;
    }else{
        index = self.index - 1;
    }
    // 首先获取pageControl里面的所有Li标签，在用eq方法获取index下标的li标签，然后给点击的li添加class="active",最后让其余的li标签去掉class="active"
    self.pageControl.children("li").eq(index).addClass("active").siblings().removeClass("active");
};


// 添加箭头显示或隐藏函数
Banner.prototype.toggleArrow = function (isShow) {
        var self = this;
        if(isShow){
            self.leftArrow.show();
            self.rightArrow.show();
        }else{
            self.leftArrow.hide();
            self.rightArrow.hide();
        }
};

// 添加轮播效果函数
Banner.prototype.loop = function () {
    var self = this;
    // 获取标签
    // 定义定时器
    self.timer = setInterval(function () {
        if (self.index>=self.bannerCount+1){
            self.bannerUl.css({"left":-self.bannerWidth});
            self.index = 2;
        }else {
            self.index++;
        }
        self.animate();
    },2000)
};

// 添加监听hover事件函数
Banner.prototype.listenBannerHover = function () {
    var self = this;
    var bannerGroup = $("#banner-group");
    // 第一个函数是鼠标移动到上面要执行的函数，第二个函数是鼠标移开要执行的函数
    bannerGroup.hover(function () {
        clearInterval(self.timer);
        self.toggleArrow(true)
    },function () {
        self.loop();
        self.toggleArrow(false);
    })
};

// 添加监听箭头点击函数
Banner.prototype.listenArrowClick = function () {
    var self = this;
    self.leftArrow.click(function () {
        if(self.index===0){
            self.bannerUl.css({"left":-self.bannerCount*self.bannerWidth});
            self.index = self.bannerCount - 1;
        }else {
            self.index--;
        }
        self.animate();
    });
    self.rightArrow.click(function () {
        if(self.index===self.bannerCount+1){
            self.bannerUl.css({"left":-self.bannerWidth});
            self.index = 2;
        }else{
            self.index++;
        }
        self.animate();
    });
};

// 添加监听小圆点函数
Banner.prototype.listenPageControl = function () {
      var self = this;
      // 查询到pageControl下面所有的li标签，each会把里面的每个元素执行它下面的函数
      self.pageControl.children("li").each(function (index,obj) {
         $(obj).click(function () {
              // 保存点击的index的值，也就是下标
              self.index = index;
              self.animate();

         })
          
      })

};

// 给Banner函数上添加run方法
Banner.prototype.run = function () {
    this.loop();
    this.listenArrowClick();
    this.initBanner();
    this.initPageControl();
    this.listenPageControl();
    this.listenBannerHover();
};


function Index() {
    var self = this;
    self.page = 2;
    self.category_id = 0;
   self.loadMoreBtn = $(".load-more-btn");
}

Index.prototype.run = function () {
    var self = this;
    self.listenLoadMoreEvent();
    self.listenCategorySwitchEvent()
};

Index.prototype.listenLoadMoreEvent = function () {
    var self = this;
    self.loadMoreBtn.click(function () {
        xfzajax.get({
            'url':'/news/list/',
            'data':{
                'p':self.page,
                'category_id':self.category_id
            },
            'success':function (result) {
                if(result['code']===200){
                    var newses = result['data'];
                    if(newses.length>0){
                        var tpl = template('news-item',{'newses':newses});
                        var ul = $(".list-inner-group");
                        ul.append(tpl);
                        self.page++
                    }else{
                        self.loadMoreBtn.hide()
                    }

                }
            }
        })
    })
};

// 监听分类按钮
Index.prototype.listenCategorySwitchEvent = function () {
    var self = this;
    var tabGroup = $(".list-tab");
    tabGroup.children().click(function () {
        // this就代表当前li标签
        var li = $(this);
        var category_id = li.attr('data-category');
        var page = 1;
        xfzajax.get({
            'url':'news/list/',
            'data':{
                'p':page,
                'category_id':category_id
            },
            'success':function (result) {
                if(result['code']===200){
                    var newses = result['data'];
                    var tpl = template('news-item',{'newses':newses});
                    var ul = $(".list-inner-group");
                    // empty可以清空里面的所有标签
                    ul.empty();
                    ul.append(tpl);
                    self.page = 2;
                    self.category_id = category_id;
                    li.addClass('active').siblings().removeClass('active');
                    self.loadMoreBtn.show()
                }
            }
        })

    })
};

// 这个函数会使里面的代码在网页加载完毕后再运行
$(function () {
    var banner = new Banner();
    banner.run();

    var index = new Index();
    index.run()
});